<template>
	<view>
		<view class="header-view">
			<view class="info-view">
				<image class="head-image-view" :src="userInfo.headimgurl" mode="aspectFill"></image>
				<view class="info-content-view">
					<view class="info-name util-font-medium">
						<text>{{userInfo.nickname}}</text>
						<text style="margin-left: 0.5rem;">财源滚滚</text>
					</view>
					<!-- <view class="info-tips util-font-regular">多邀1位好友，预计可多赚923元/月</view> -->
				</view>
				<view class="share-view" @click="inviteFriends">
					<image class="share-image" src="../../static/workbench/share2.png" mode="aspectFit"></image>
					<view class="share-title util-font-medium">邀请好友</view>
				</view>
			</view>
			<view class="price-view" @click="myAccount">
				<view class="price-content-view">
					<view class="price-title util-font-regular">我的余额</view>
					<view class="price-text">
						<view class="price-logo util-font-regular">￥</view>
						<view class="price-value util-font-medium">{{data.amount?(parseInt(data.amount)/100.0):0.0}}</view>
					</view>
					<view class="price-other util-font-regular">
						<text>今日到账￥{{parseInt(data.today_account)/100.0}}</text>
						<text style="margin-left: 30rpx;">待入账￥{{parseInt(data.tb_account)/100.0}}</text>
					</view>
				</view>
				<view class="withdrawal-button">
					<image class="withdrawal-button-image" src="../../static/workbench/arrow_right_white.png" mode="aspectFit"></image>
					<view class="withdrawal-button-title util-font-regular">提现</view>
				</view>
			</view>
			<image class="header-bottom-line-view" src="../../static/workbench/workbench1.png" mode="aspectFit"></image>
		</view>
		
		<!-- 我的业绩 -->
		<view class="content-view" @click="achievement">
			<view class="content-title util-font-regular">
				<view class="content-title-value">我的业绩</view>
				<image class="content-arrow-button" src="../../static/workbench/arrow_right.png" mode=""></image>
			</view>
			<view class="content-line"></view>
			<view class="item-list">
				<view class="item util-font-regular">
					<view class="item-title">累计收益</view>
					<view class="item-number">
						<view class="item-number-unit">￥</view>
						<view class="item-number-value util-font-medium">{{parseInt(data.total_amount)/100.0}}</view>
					</view>
					<view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+￥{{parseInt(data.today_account)/100.0}}</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">累计订单</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{parseInt(data.account_order_num)}}</view>
						<view class="item-number-unit">单</view>
					</view>
					<view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+{{parseInt(data.today_account_order_num)}}单</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">团队收益</view>
					<view class="item-number">
						<view class="item-number-unit">￥</view>
						<view class="item-number-value util-font-medium">{{parseInt(data.account_team)/100.0}}</view>
					</view>
					<view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+￥{{parseInt(data.today_account_team)/100.0}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我的团队 -->
		<view class="content-view" @click="myTeam">
			<view class="content-title util-font-regular">
				<view class="content-title-value">我的团队</view>
				<image class="content-arrow-button" src="../../static/workbench/arrow_right.png" mode=""></image>
			</view>
			<view class="content-line"></view>
			<view class="item-list" style="padding-bottom: 5px;">
				<view class="item util-font-regular">
					<view class="item-title">全部队员</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.team_num}}</view>
						<view class="item-number-unit">人</view>
					</view>
					<!-- <view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+0人</view>
					</view> -->
				</view>
				<view class="item util-font-regular">
					<view class="item-title">注册粉丝</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.fans_sum}}</view>
						<view class="item-number-unit">人</view>
					</view>
					<!-- <view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+￥0</view>
					</view> -->
				</view>
				<view class="item util-font-regular">
					<view class="item-title">直属达人</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.direct_num}}</view>
						<view class="item-number-unit">人</view>
					</view>
					<!-- <view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+￥0</view>
					</view> -->
				</view>
				<view class="item util-font-regular">
					<view class="item-title">间接达人</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.indirect_num}}</view>
						<view class="item-number-unit">人</view>
					</view>
					<!-- <view class="item-change">
						<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
						<view class="item-change-value">今日+￥0</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<!-- 我的返佣订单 -->
		<view class="content-view" @click="myCommissionOrder">
			<view class="content-title util-font-regular">
				<view class="content-title-value">我的返佣订单</view>
				<image class="content-arrow-button" src="../../static/workbench/arrow_right.png" mode=""></image>
			</view>
			<view class="content-line"></view>
			<view class="item-list" style="padding-bottom: 5px;">
				<view class="item util-font-regular">
					<view class="item-title">待入账</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.tb_num}}</view>
						<view class="item-number-unit">单</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">已到账</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.account_num}}</view>
						<view class="item-number-unit">单</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">今日到账</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">{{data.today_num}}</view>
						<view class="item-number-unit">单</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我分享的商品 -->
		<!-- <view class="content-view" @click="myShareProduct">
			<view class="content-title util-font-regular">
				<view class="content-title-value">我分享的商品</view>
				<image class="content-arrow-button" src="../../static/workbench/arrow_right.png" mode=""></image>
			</view>
			<view class="content-line"></view>
			<view class="item-list" style="padding-bottom: 5px;">
				<view class="item util-font-regular">
					<view class="item-title">今日点击</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">0</view>
						<view class="item-number-unit">次</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">今日访问</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">0</view>
						<view class="item-number-unit">人</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">成交订单</view>
					<view class="item-number">
						<view class="item-number-value util-font-medium">0</view>
						<view class="item-number-unit">单</view>
					</view>
				</view>
				<view class="item util-font-regular">
					<view class="item-title">预计收益</view>
					<view class="item-number">
						<view class="item-number-unit">￥</view>
						<view class="item-number-value util-font-medium">0</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				data: null,
				
			}
		},
		onLoad() {

			this.userInfo = uni.getStorageSync('userInfo')
			this.loadData()
		},
		onPullDownRefresh() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.loadData()
		},
		methods: {
			loadData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appBrokerageRecords/statistics/' + that.userInfo.id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token', 'json'),
					success: function(res){
						that.data = res.data.data
					}
				})
			},
			inviteFriends: function(){
				uni.navigateTo({
					url: 'inviteFriends'
				})
			},
			myAccount: function(){
				uni.navigateTo({
					url: 'account'
				})
			},
			achievement: function(){
				uni.navigateTo({
					url: 'achievement'
				})
			},
			myTeam: function(){
				uni.navigateTo({
					url: 'team'
				})
			},
			myCommissionOrder: function(){
				// uni.showModal({
				// 	content: '暂未完成',
				// 	showCancel: false
				// });
				// return
				
				uni.navigateTo({
					url: 'commissionOrder'
				})
			},
			myShareProduct: function(){
				uni.showModal({
					content: '暂未实现',
					showCancel: false
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}
	
	/* 头部 */
	.header-view {
		background-color: #fcf7e9;
		position: relative;
	}
	
	.info-view {
		width: 730rpx;
		height: 100rpx;
		padding: 25rpx 0 25rpx 20rpx;
	}
	.head-image-view {
		width: 100rpx;
		height: 100rpx;
		float: left;
		border-radius: 50rpx;
	}
	.info-content-view {
		width: 415rpx;
		height: 100rpx;
		float: left;
		margin-left: 15rpx;
	}
	.info-name {
		width: 100%;
		height: 100rpx;
		color: #333333;
		font-size: 32rpx;
		line-height: 100rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.info-tips {
		width: 100%;
		height: 35rpx;
		color: #999999;
		font-size: 25rpx;
	}
	.share-view {
		width: 196rpx;
		height: 32rpx;
		border-top-left-radius: 32rpx;
		border-bottom-left-radius: 32rpx;
		background-color: white;
		text-align: center;
		float: right;
		padding: 16rpx 0rpx;
		margin-top: 10rpx;
	}
	.share-image {
		width: 30rpx;
		height: 30rpx;
		float: left;
		margin-left: 25rpx;
	}
	.share-title {
		font-size: 28rpx;
		height: 32rpx;
		line-height: 32rpx;
		color: #eb6632;
		float: left;
		margin-left: 7rpx;
	}
	.price-view {
		width: 660rpx;
		height: 154rpx;
		margin: 0 20rpx;
		padding: 20rpx 25rpx;
		background: linear-gradient(to right, #eb8735, #ea5a2e);
		border-radius: 20rpx;
	}
	.price-content-view {
		width: 540rpx;
		height: 154rpx;
		float: left;
	}
	.price-title {
		width: 100%;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 30rpx;
		color: #eeeeee;
	}
	.price-text {
		width: 100%;
		height: 50rpx;
		margin-top: 20rpx;
		line-height: 50rpx;
	}
	.price-logo {
		color: white;
		font-size: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		float: left;
		position: relative;
		top: 14rpx;
	}
	.price-value {
		color: white;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 46rpx;
		float: left;
	}
	.price-other {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 9rpx;
		color: #eeeeee;
		font-size: 26rpx;
	}
	
	.withdrawal-button {
		width: 120rpx;
		height: 154rpx;
		float: right;
	}
	.withdrawal-button-image {
		width: 30rpx;
		height: 100%;
		float: right;
	}
	.withdrawal-button-title {
		float: right;
		height: 154rpx;
		line-height: 154rpx;
		font-size: 36rpx;
		color: white;
	}
	
	
	.header-bottom-line-view {
		width: 750rpx;
		height: 22rpx;
		position: absolute;
		bottom: 0;
	}
	
	.content-view {
		width: 660rpx;
		margin: 15rpx 20rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0px 0px 15rpx #dddddd;
	}
	.content-title
	{
		width: 100%;
		height: 55rpx;
	}
	.content-title-value {
		height: 55rpx;
		line-height: 55rpx;
		font-size: 38rpx;
		color: #333333;
		font-size: 34rpx;
		float: left;
	}
	.content-arrow-button {
		width: 30rpx;
		height: 30rpx;
		margin-top: 13rpx;
		float: right;
	}
	.content-line {
		width: 710rpx;
		height: 2rpx;
		background-color: #F1F1F1;
		margin-top: 20rpx;
		position: relative;
		left: -20rpx;
	}
	.item-list {
		margin-top: 20rpx;
		display: flex;
		justify-content:space-between;
	}
	.item{
		width: 165rpx;
		text-align: center;
	}
	.item-title {
		width: 100%;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 26rpx;
		color: #666666;
	}
	.item-number {
		width: 100%;
		height: 43rpx;
		line-height: 43rpx;
		margin-top: 10rpx;
	}
	.item-number-unit {
		color: #333333;
		font-size: 24rpx;
		display: inline-block;
	}
	.item-number-value {
		color: #333333;
		font-size: 32rpx;
		display: inline-block;
	}
	.item-change {
		width: 100%;
		height: 35rpx;
		line-height: 35rpx;
		position: relative;
		/* top: -8rpx; */
		margin-bottom: 10rpx;
	}
	.item-change-image {
		width: 14rpx;
		height: 20rpx;
		position: relative;
		top: 5rpx;
	}
	.item-change-value {
		height: 35rpx;
		line-height: 35rpx;
		font-size: 20rpx;
		color: #d8622c;
		display: inline-block;
		margin-left: 5rpx;
	}
</style>
